<template>
  <div class="common-layout">
    <el-form class="header" :model="queryParam" ref="queryRef" :inline="true">
      <el-form-item label="书名" prop="ipaddr">
        <el-select style="width: 200px" clearable v-model="queryParam.book" placeholder="书名">
          <el-option v-for="item in 7" :key="item" :label= "`${('book')}${item}`" :value= "`${('book')}${item}`" />
        </el-select>
      </el-form-item>

      <el-form-item label="单元名称" prop="ipaddr">
        <el-select style="width: 200px" clearable v-model="queryParam.unit" placeholder="单元名称">
          <el-option v-for="item in 6" :key="item" :label= "`${('unit')}${item}`" :value= "`${('unit')}${item}`" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="searchByUnit">确认</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>

        <el-statistic  style="margin-left: 20px" :value="pageData.length">
          <template #title>
            <div style="display: inline-flex;">
              总计
            </div>
          </template>
        </el-statistic>

      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col :sm="24" :lg="16" style="padding-left: 20px">
        <el-table
            v-loading="loading"
            :data="pageData"
            :default-sort="{ prop: 'updateTime', order: 'descending' }"
            border
            stripe
            highlight-current-row
        >
          <el-table-column type="selection" width="40" align="center"/>
          <el-table-column label="编号" v-if="false" width="210" prop="_id"/>
          <el-table-column label="书名" width="70" align="center" prop="book"/>
          <el-table-column label="课程" width="70" align="center" prop="unit"/>
          <el-table-column label="单词/词组"  align="center" prop="name"/>
          <el-table-column label="拼写"  align="center" prop="nameAgain">
            <template #default="scope">
              <el-input @blur="handleBlur(scope.row)" v-model="scope.row.nameAgain" placeholder="请拼写一遍"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="中文名" align="center" prop="chinese"/>
          <el-table-column label="词性" width="60" align="center" prop="type"/>

          <el-table-column v-if="false" label="排序" align="center" prop="number"/>
          <el-table-column label="上次学习时间" width="180" align="center" prop="updateTime"/>
          <el-table-column label="操作" align="center" width="80" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link @click="handleColumnAudio(scope.row)" type="success">发音</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :sm="24" :lg="8" style="padding-left: 50px">
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 查询
import {handleColumnAudio, listTestPage, putStudyData, removeTest} from "@/api/word/index.js";
import { getCurrentInstance } from 'vue';
import {parseTime} from "@/utils/ruoyi.js";

let queryParam = ref({
  unit: undefined,
  type: 2,
})

const { proxy } = getCurrentInstance()
const { word_study_status } = proxy.useDict("word_study_status")

let hiddenName = true
let hiddenChinese = true

let pageData = ref([])
let loading = false

initPage()

function handleQuery() {
  loading = true
  // console.log(queryParam.value)
  listTestPage(queryParam.value).then((res) => {
    // console.log(res)
    if (res.code === 200 && res.data !== undefined) {
      pageData.value = res.data
      // console.log(res)
    }
    else {
      pageData.value = []
    }
  })
  loading = false
}

function removeTestData(id){
  removeTest(id).then((res) => {
    if (res.code === 200) {
      console.log(res)
    }
  })
}

function initPage(){
  queryParam.value.unit = 'unit1'
  queryParam.value.book = 'book1'
  handleQuery()
  // queryParam.value.unit = undefined
}

function handleBlur(row){
  // console.log(row)
  if (row.nameAgain.length === 0) {
    return
  }
  if (row.name !== row.nameAgain){
    proxy.$modal.msgWarning("拼写错误,请再试一次")
    row.nameAgain = ''
  }
  else {
    proxy.$modal.msgSuccess(row.name + "将从生词列表移除")
    setTimeout(()=>{
      let number = pageData.value.indexOf(row);
      pageData.value.splice(number, 1);
    },2000)
    removeTestData(row._id)
    delete row._id
    row.time = parseTime(new Date())
    putStudyData(row).then(response => {
      if (response.code === 200) {
        console.log(response.data)
      }
    })
  }
}

function searchByUnit(){
  if(queryParam.value.unit === undefined){
    return
  }
  proxy.$modal.msg("查询的书名:" + queryParam.value.book +  "  课程名称:" + queryParam.value.unit)
  handleQuery()
}

function resetQuery() {
  hiddenName = true
  hiddenChinese = true
  initPage()
}

</script>

<style scoped lang="scss">
.header {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
